<!-- 
	Testing file to verify silhouetteiframe.js.
	Must be installed and run off of a web server (http:...) Won't work via file:. 
-->
<html dir="ltr">
    
	<head>
		<style type="text/css">
			body, html { 
				font-family:helvetica,arial,sans-serif; 
				font-size:90%;
				width:100%;
				height:100%;
				margin:0;
				padding:0;
			}
			.silhouette_table_container {
				width:100%;
				height:100%;
			}
			.silhouette_td_container {
				text-align:left;
				vertical-align:top;
			}
		</style>

		<!-- *** IMPORTANT NOTE: modulePaths needs to be changed before going final *** -->

		<script src="../../dojo/dojo.js" data-dojo-config="modulePaths:{'preview':'../preview'}"></script>
		<link rel="stylesheet" type="text/css" href="../../dijit/themes/claro/claro.css"/>
		<script>
		require(['preview/singlepreview', 'dojo/domReady!'], function(SinglePreview){
			var devicelist=[
							{value:"0", label:'android_340x480', file:'../images/android_340x480.svg'},
							{value:"1", label:'android_480x800', file:'../images/android_480x800.svg'},
							{value:"2", label:'androidtablet', file:'../images/androidtablet.svg'},
							//bbplaybook.svg is currently broken: rotated 90 degrees
							//{value:"3", label:'bbplaybook', file:'../images/bbplaybook.svg'},
							{value:"3", label:'blackberry', file:'../images/blackberry.svg'},
							{value:"4", label:'ipad', file:'../images/ipad.svg'},
							{value:"5", label:'iphone', file:'../images/iphone.svg'}
					];
			var currentDevice = "0";
			var svgfilename = devicelist[0].file;
			var iframefilename = '../test/pages/page1.html';
			var orientation='portrait';
			var scalefactor=1;
			var showZoom=true;

			function initSinglePreview(){
				var singlepreview_container = document.querySelectorAll(".singlepreview_container")[0];
				window.singlepreview = new SinglePreview({
					devicelist:devicelist,
					currentDevice:currentDevice,
					svgfilename:svgfilename,
					iframefilename:iframefilename,
					orientation:orientation,
					scalefactor:scalefactor,
					showZoom:showZoom,
					pathToPreviewerFolder:'../'
				},singlepreview_container);
			}

			// Used by test case in preview/test folder, not used by preview.html
			window.destroyRecreate = function() {
				singlepreview.destroy(true);
				initSinglePreview();
			}

			initSinglePreview();
		});
		</script>
	</head>
    
	<body class="claro">
		<table class="silhouette_table_container">
			<tr>
				<td class="silhouette_td_container">
					<div class="singlepreview_container">
					</div>
				</td>
			</tr>
			<tr><td>
				<button type="button" onclick="destroyRecreate();">Destroy/recreate</button> (tests whether destroy works properly)
			</td></tr>
		</table>
	</body>

</html>